- Moved quickstart page under Welcome page in Use Cases tab
- Removed standalone Quick Start tab
- Changed quickstart.mdx mode from 'custom' to 'frame' to match Welcome page
- Keeps sidebar title as "Quick Start"

Comprehensive styling improvements to achieve visual parity with Welcome page:

STRUCTURE & LAYOUT:
- Added page wrapper with 2rem top padding, 1400px max-width, centered
- Added H1 title and description intro section with proper styling
- Added descriptive section headers "Try It Yourself" and "How Request Network Compares"
- Reorganized content hierarchy for better information flow

TYPOGRAPHY UPDATES:
- H1: 2.5rem font size with text-zinc-950 dark:text-white classes
- H2: Changed from 2rem to 1.75rem for consistency with Welcome page
- Paragraphs: Upgraded from 1rem to 1.125rem with lineHeight 1.75
- Replaced inline color: var(--text-primary) with theme-aware className

GREEN-TINTED BACKGROUNDS:
- Created new DemoContainer component with gradient backgrounds
- Light mode: rgba(1,176,137,0.02) → rgba(1,176,137,0.04) gradient
- Dark mode: rgba(1,176,137,0.06) → rgba(1,176,137,0.10) gradient
- Added subtle green borders matching the Request Network brand
- Updated RequestLifecycleDemo main area from flat gray to softer gradient

SPACING STANDARDIZATION:
- Demo sections use marginBottom: 4rem (was mt-12 Tailwind class)
- Final card section uses marginBottom: 3rem
- Headers use marginTop: 3rem, marginBottom: 2rem consistently
- Converted all Tailwind spacing to inline styles for uniformity

THEME COMPATIBILITY:
- All components tested for light and dark mode support
- Green tints optimized per theme for proper contrast
- Text colors use semantic variables and theme-aware classes

Files changed:
- quickstart.mdx: Complete page restructure and styling
- snippets/demo-container.jsx: New wrapper component for green backgrounds
- snippets/request-lifecycle-demo.jsx: Updated main demo area background

Critical fixes for light/dark mode contrast and green theming:

DARK MODE BACKGROUND FIXES:
- DemoContainer: Changed from light rgba to proper dark green (#001912 → #00251a)
- Main demo area: Dark green gradient (#002419 → #003326) instead of gray
- Increased border opacity for better definition in dark mode

STEPPER VISIBILITY FIX:
- Fixed white-on-white text in light mode (was invisible)
- Active steps now use explicit #01B089 background with white text
- Applied inline styles to override Tailwind primary color issues
- Progress lines also use #01B089 for consistency

GREEN-TINTED BACKGROUNDS:
- Main demo area: rgba(1,176,137,0.04) → rgba(1,176,137,0.08) gradient in light
- DemoContainer: Increased light mode opacity for better visibility
- All borders use green tint instead of gray

These changes ensure:
✓ Stepper numbers are always visible in both themes
✓ Dark mode shows proper dark green, not light/weird color
✓ All backgrounds use green shades matching brand aesthetic
✓ Proper contrast ratios for accessibility

…accordion

DEDUPLICATION:
- Removed centered header from RequestLifecycleDemo (duplicated page's left-justified "Try It Yourself")
- Removed centered header from PaymentProcessorQA (duplicated page's "How Request Network Compares")
- Eliminated redundant background container from PaymentProcessorQA
- Page-level headers now serve as the single source for section titles

ACCORDION GREEN THEME:
- Accordion items: Green gradient backgrounds (rgba 0.02-0.06 light, #002419-#003326 dark)
- Active accordion: Stronger green tint when expanded
- Hover state: Green border on hover instead of primary color
- Example boxes: Green gradients instead of gray (rgba 0.05-0.08)
- All borders: Green-tinted instead of neutral gray

VISUAL CONSISTENCY:
- Accordion backgrounds now match the DemoContainer and main demo area
- Dark mode uses same dark green palette (#002419-#003326) throughout
- Light mode uses consistent green tints with rgba(1,176,137,...)
- All interactive elements use green theme consistently

The entire QuickStart page now has unified green theming with no duplicate headers.

Refined copy to be more direct and outcome-focused while maintaining
technical documentation tone (not marketing). Changes prioritize clarity
and actionable information for developers.

PAGE STRUCTURE:
- H1: "How Request IDs Work" (clearer than redundant "Quick Start")
- Intro: Explains the what/why upfront with concrete benefit (eliminates manual matching)

SECTION HEADERS (more specific, less generic):
- "Interactive Demo" (was "Try It Yourself")
- "Comparison with Traditional Processors" (was "How Request Network Compares")
- "Explore Use Cases" (was "What's Next?")
- "Start Building" (was "Ready to Build?")

SECTION DESCRIPTIONS (more direct):
- Removed filler phrases like "Experience the concept" and "Now that you understand"
- Lead with what the section delivers, not setup/context
- Example: "Create a request, get a unique ID, and see how..." vs previous wordier version

CARD COPY IMPROVEMENTS:
Invoicing:
- Before: "Create professional invoices with payment terms, line items..."
- After: "Turn invoices into trackable on-chain requests with automatic..."
- Focus: Outcome (trackable) vs features (payment terms, line items)

Payouts:
- Before: "...with one click and automatic tracking"
- After: "...in a single transaction with automatic tracking"
- Focus: Technical accuracy (single transaction) vs marketing (one click)

API Setup Cards:
- Added specific actions: "Set up authentication and create your first request"
- Added portal capabilities: "Manage API keys, view requests, and configure webhooks"
- Previous versions were too vague

TONE MAINTAINED:
✓ Technical and accurate
✓ Developer-focused
✓ No marketing fluff or hype
✓ Direct and informative

…payments

TECHNICAL CORRECTION:
Request IDs identify requests (like invoices), not individual payments.
Multiple payments can be made against a single request. Payments reference
the Request ID to indicate which request they're fulfilling.

CHANGES:
1. Page description:
   - Before: "every payment a unique ID"
   - After: "Request IDs link payments to business context"

2. Main intro paragraph:
   - Before: "Every payment gets a unique Request ID..."
   - After: "Every request gets a unique Request ID... Payments are then
     tied to this Request ID..."

3. Demo section description:
   - Before: "see how the payment is automatically tracked"
   - After: "see how payments are automatically tracked against that request"

4. Callout box in demo:
   - Before: "Every Request Network payment gets a unique ID..."
   - After: "Every Request Network request gets a unique ID... Payments
     reference this Request ID..."

ACCURACY MAINTAINED:
✓ Request ID = unique identifier for a request (1:1)
✓ Payments → Request ID (many:1 possible)
✓ Request ID links request to business context
✓ Payments reference Request ID for reconciliation

Changed from generic "Interactive Demo" to more descriptive
"Create and Pay a Request Demo" to clearly communicate what
the demo shows.

Deleted "The Power of Request IDs" and "The Bottom Line" callout boxes.

RATIONALE:
Both boxes were redundant marketing artifacts that didn't fit technical docs:

1. "The Power of Request IDs" box:
   - Repeated content already in page intro
   - Positioned after demo when concept should already be clear
   - Added no new information

2. "The Bottom Line" box:
   - Redundant summary after detailed accordion already explained everything
   - Felt like sales pitch rather than documentation
   - Broke natural flow before use cases section

IMPROVEMENTS:
✓ Cleaner, more scannable page structure
✓ No visual inconsistency with emoji lightbulbs
✓ Tighter, more focused content
✓ Natural doc flow: intro → demo → comparison → next steps
✓ Let the content and structure do the teaching, not visual gimmicks

The page intro and comparison accordion already provide all necessary
context and value proposition. No need for redundant callouts.